<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_header_include::frag(~{::title},~{::style},~{})">
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <style>
        .settleAccountsForm{width:850px;margin:0 auto;font-size: 14px;color: #000;}
        .settleAccountsForm .title{font-size: 20px;text-align: center;font-weight: bold;margin-bottom: 20px;}
        .settleAccountsForm .dateBox{overflow: hidden;margin-bottom: 10px;}
        .settleAccountsForm .f-fl{width: 50%;}
        .settleAccountsForm table{ border-collapse:collapse; }
        .settleAccountsForm td{ border:#000 solid 1px; padding:10px 5px; }
        .settleAccountsForm table .tit td{text-align: center;background: #f3f3f3;}
        .settleAccountsForm table .tit2 td{height: 80px;vertical-align: text-top;line-height: 80px;}
        .fontBold{font-weight: bold;}
    </style>
</head>
<body>
<div id="maindiv" class="maindiv mainPadding" style="display: none;"> 
    <div class="settleAccountsForm">
        <div class="title">结算单</div>
        <div class="dateBox">
            <div class="f-fl">日期：{{year}}年{{month}}月{{day}}日</div>
            <div class="f-fl">编号：{{statementNo}}</div>
        </div>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr class="tit">
                <td colspan="8" class="fontBold">客户信息</td>                
            </tr>
            <tr>
                <td>客户姓名</td>
                <td>{{cusName}}</td>
                <td>联系电话</td>
                <td colspan="2">{{phone}}</td>
                <td>身份证号码</td>
                <td colspan="2">{{idCard}}</td>
            </tr>
            <tr class="tit">
                <td colspan="8" class="fontBold">签约信息</td>                
            </tr>
            <tr>
                <td>签约项目</td>
                <td>{{projectName}}</td>
                 <td>签约店型</td>
                <td colspan="2">{{signShopType}}</td>
                <td>餐饮公司</td>
                <td colspan="2">{{companyName}}</td>
            </tr>
            <tr>
               <td>签约区域</td>
                <td colspan="7">{{signProvince}}{{signCity}}{{signDictrict}}</td>
            </tr>
            <tr>
                <td>应收金额</td>
                <td>{{signAmountReceivable}}</td>
                 <td>优惠金额</td>
                <td colspan="2">{{preferentialAmount}}</td>
                <td>路费</td>
                <td colspan="2">{{firstToll}}</td>
            </tr>
            <tr>
                <td>赠送金额</td>
                <td>{{giveAmount}}</td>
                 <td>赠送类型</td>
                <td colspan="5">{{giveTypeName}}</td>                
            </tr>
            <!-- <tr class="tit2">
                <td>培训内容</td>
                <td colspan="7"></td>
            </tr> -->
            <tr class="tit">
                <td colspan="8" class="fontBold">付款信息</td>                
            </tr>
            <tr>
                <td>付款方式</td>
                <td>{{payModes}}</td>
                 <td>付款类型</td>
                <td colspan="2">{{payTypes}}</td>
                <td>实收金额</td>
                <td colspan="2">{{amountReceived}}</td>
            </tr>
            <tr class="tit2">
                <td>备注</td>
                <td colspan="7"></td>
            </tr>
            <tr class="tit2">
                <td>商务经理</td>
                <td>{{businessManagerName}}</td>
                <td colspan="6">财务确认(盖章)</td>
            </tr>
            <!-- <tr>
                <td>地区</td>
                <td>{{busAreaName}}</td>
                <td>事业部</td>
                <td>{{teleDeptName}}</td>
                <td>项目组</td>
                <td>{{teleGorupName}}</td>
                <td>电销顾问</td>
                <td>{{teleSaleName}}</td>
            </tr> -->
        </table>


    </div>
</div>
<div th:include="_footer_include :: #jsLib"></div>
</body>
<script th:inline="javascript">  
var accountDTO=[[${accountDTO}]];

    var mainDivVM = new Vue({
        el: '#maindiv',
        data:{
        	year:"",
        	month:"",
        	day:"",
        	statementNo:"",
        	cusName:"",
        	phone:"",
        	idCard:"",
        	projectName:"",
        	signProvince:"",
        	signCity:"",
        	signDictrict:"",
        	companyName:"",
        	signShopType:"",
        	payModes:"",
        	payTypes:"",
        	amountReceived:"",
        	businessManagerName:"",
        	busAreaName:"",
        	teleDeptName:"",
        	teleGorupName:"",
        	teleSaleName:"",
        	signAmountReceivable:"",
        	preferentialAmount:"",
        	amountPerformance:"",
        	amountReceived:"",
        	firstToll:"",
        	settlementMoney:"",
        	giveAmount:"",
        	giveTypeName:""
        },
        methods: {
            
        },
        created(){ 
        	this.year= accountDTO.year;
        	this.month= accountDTO.month;
        	this.day= accountDTO.day;
        	this.statementNo= accountDTO.statementNo;
        	this.cusName=accountDTO.cusName ;
        	this.phone=accountDTO.phone ;
        	this.idCard=accountDTO.idCard ;
        	this.projectName=accountDTO.projectName ;
        	this.signProvince=accountDTO.signProvince ;
        	this.signCity=accountDTO.signCity ;
        	this.signDictrict=accountDTO.signDictrict ;
        	this.companyName=accountDTO.companyName ;
        	this.signShopType=accountDTO.signShopType ;
        	this.payModes=accountDTO.payModes ;
        	this.payTypes=accountDTO.payTypes ;
        	this.amountReceived=accountDTO.amountReceived ;
        	this.businessManagerName=accountDTO.businessManagerName ;
        	this.busAreaName=accountDTO.busAreaName ;
        	this.teleDeptName=accountDTO.teleDeptName ;
        	this.teleGorupName=accountDTO.teleGorupName ;
        	this.teleSaleName=accountDTO.teleSaleName ;
        	this.signAmountReceivable=accountDTO.signAmountReceivable ;
        	this.preferentialAmount=accountDTO.preferentialAmount ;
        	this.amountPerformance=accountDTO.amountPerformance ;
        	this.amountReceived=accountDTO.amountReceived ;
        	this.settlementMoney = accountDTO.settlementMoney;
        	this.firstToll = accountDTO.firstToll;
        	this.giveAmount = accountDTO.giveAmount ;
        	this.giveTypeName = accountDTO.giveTypeName ;
        },
        mounted(){
            document.getElementById('maindiv').style.display = 'block';
        }
    })
</script>
</html>